<template>
  <div id="AnimatedCircle"></div>
</template>

<script>
export default {
  name:'AnimatedCircle',
  methods:{
    // JavaScript Document
    // 圆类（继承AnimatedObject）
    AnimatedCircle(objectID, label, radius) {
      this.objectID = objectID ; // 物体ID
      this.label = label ; // 标签
      this.radius = radius ; // 半径
      this.addToScene = true ; // 是否加入画布
    },
    // 画图
    animatedCircleDraw(ctx) {
      ctx.beginPath() ;
      // 设置透明度
      ctx.globalAlpha = 1.0 ;
      // 画背景
      //画一个圆
      ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, false) ;
      ctx.fillStyle = this.backgroundColor ;
      //填充
      ctx.fill() ;
      // 画外框
      ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, false) ;
      ctx.strokeStyle = this.foregroundColor ;
      //线宽度
      ctx.lineWidth = 2 ;
      //绘制一条路径
      ctx.stroke() ;
      // 画文字
      ctx.font = "10px Arial" ;
      ctx.textAlign = "center" ;
      ctx.textBaseline = "middle" ;
      ctx.fillStyle = this.foregroundColor ;
      ctx.fillText(this.label, this.x, this.y) ;
      // 判断是否需要画高亮的圆
      if(this.highlighted) {
        ctx.beginPath() ;
        // 设置透明度
        ctx.globalAlpha = this.alpha;
        // 画背景
        ctx.arc(this.x, this.y, parseInt(this.radius), 0, 2*Math.PI, false) ;
        ctx.fillStyle = this.highlightColor ;
        ctx.fill() ;
      }
    },
    // 获得箭头的头部坐标
    getArrowHeadPoint(fromX, fromY) {
      var xVec = parseInt(this.x - fromX) ;
      var yVec = parseInt(this.y - fromY) ;
      var len = Math.sqrt(xVec * xVec + yVec * yVec) ;
      var deltaX = this.radius * ( xVec / len ) ;
      var deltaY = this.radius * ( yVec / len ) ;
      return [this.x-deltaX, this.y-deltaY] ;
    },
    // 获得箭头的尾部坐标
    getArrowTailPoint(fromX, fromY) {
      return this.getArrowHeadPoint(fromX, fromY) ;
    } 

  }
}
</script>

<style>

</style>